<template>
  <div class="content">
    <div class="head">
      <div class="searchContent">
        <div class="address" @click="selectCity">{{city}} {{" "}}<van-icon name="arrow-down" /></div>
        <van-search v-model="value" placeholder="请输入搜索关键词" :clearable='false' @input='inputValue' />
      </div>
    </div>

    <div>
      <div class="area" @click="selectArea">{{area}} {{" "}}<van-icon name="arrow-down" /></div>
      <div class="areaList" @click="gotoDetail(item)" v-for="(item,index) in cinemaList" :key="index">
        <div class="areaName">{{item.cinemaName}}</div>
        <div class="areaAddress"><div class="addressText">{{item.address}}</div> <div>{{distance(item.distance)}}</div></div>
      </div>
    </div>


    <div v-if="isCity" class="popup">
      <van-picker
        title="城市"
        show-toolbar
        :columns="cityList"
        @confirm="cityConfirm"
        @cancel="cityCancel"
      />
    </div>

    <div v-if="isArea" class="popup">
      <van-picker
        title="区域"
        show-toolbar
        :columns="areaList"
        @confirm="areaConfirm"
        @cancel="areaCancel"
      />
    </div>
  </div>
</template>

<script>
import {
  setStore,
  getStore,
  removeStore
} from '@/utils/storage'
import json from '@/utils/address.json'
import {Tabbar, TabbarItem} from 'vant';
import {getPlanSeat,userInfo,getCinemaList,getDistrict } from '@/api/home.js'
import { options } from 'less';
export default {
  name: "my",
  data() {
    return {
      value:'',
      active: 0,
      isCity:false,
      isArea:false,
      cityList:[],
      areaList:[],
      filmCode:'',
      areaCodeList:[],
      citycode:'',
      areacode:'',
      area:'',
      city:'',
      cinemaList:[]
    };
  },
  mounted() {
    this.filmCode = this.$route.query.filmCode
    if(getStore('selectCity')){
      this.city = getStore('selectCity')
    }else{
      this.city = JSON.parse(getStore('addressInfo')).address_component.city
    }

    this.citySelect()
  },
  methods: {
    distance(item){
      console.log(item)
      return item>1000?Number(item/1000).toFixed(2)+'km':item+'m'
    },
    // 影院列表
    getCinemaList(){
      let data = {
        cityId : this.citycode,
        countyId : this.areacode,
        name : this.value,
        limit:99999,
        location:JSON.parse(getStore('addressInfo')).location.lat+' '+JSON.parse(getStore('addressInfo')).location.lng,
        filmCode:this.filmCode
      }
      getCinemaList(data).then(res=>{
        console.log(res)
        this.cinemaList = res.page.records
      })
    },
    //输入内容
    inputValue(e){
      this.debounceSearch();
    },
    debounceSearch() {
      // 清除之前的定时器
      clearTimeout(this.timer);

      // 设置新的定时器
      this.timer = setTimeout(() => {
        this.getCinemaList()
      }, 500); // 设置防抖的时间间隔，例如500毫秒
    },
    selectCity(){
      this.isCity = true
    },
    selectArea(){
      this.isArea = true
    },
    cityConfirm(e){
      this.cityCode(e)
      this.isCity = false
      this.city = e
    },
    cityCancel(){
      this.isCity = false
    },
    areaConfirm(e){
      this.areaCode(e)
      this.isArea = false
      this.area = e
    },
    areaCancel(){
      this.isArea = false
    },
    gotoDetail(item){
      this.$router.push({
        path:'/cinemaDetail?item='+JSON.stringify(item)
      })
    },
    //获取城市列表
    citySelect(){
      let jsonList = Object.entries(json.child)
      jsonList.forEach((item,index)=>{
        this.cityList.push(item[1].name)
      })
      this.cityCode(this.city)
    },
    //获取城市编码和区域列表
    cityCode(e){
      this.areaList = []
      this.areaCodeList = []
      getDistrict().then(res=>{
        let jsonList = Object.entries(JSON.parse(res.data).child)
        jsonList.forEach((item,index)=>{
          if(item[1].name==e){
            this.citycode=item[0]
            Object.entries(item[1].child).forEach((it,idx)=>{   //根据城市获取区域列表
              this.areaList.push(it[1])
              this.areaCodeList.push(it[0])  //根据城市获取区域编码列表 数据对应区域列表
            })
          }
        })
        this.areaList.unshift('全城')
        this.areaCodeList.unshift('')
        this.areacode = this.areaCodeList[0]
        this.area = this.areaList[0]
        this.getCinemaList()
      })

    },
    //获取区域编码
    areaCode(e){
      this.areaList.forEach((item,index)=>{
        if(item == e){
          this.areacode = this.areaCodeList[index]
        }
      })
      this.getCinemaList()
    }
  },
  watch: {},
};
</script>

<style scoped lang="scss">
  .content{
    min-width: 100vw;
    min-height: 100vh;
    background-color: #EBF2FC;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 100px;
    .head{
      width: 100%;
      height: 60px;
      background-color: #fff;
      overflow: hidden;
      .searchContent{
        width: 100%;
        height: 28px;
        margin-top: 18px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 12px;
        overflow: hidden;
        .address{
          font-weight: bold;
          font-size: 13px;
          color: #333333;
          white-space: nowrap
        }
        .van-search{
          height: 28px;
        }
      }
    }

    .listHead{
      margin-left: 25px;
      margin-top: 10px;
      .day{
        font-weight: 500;
        font-size: 12px;
        color: #AFAFAF;
      }
      .dayTime{
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
    }
    .list{
      width: 353px;
      height: 129px;
      background-color: #fff;
      border-radius: 5px;
      margin: 10px auto 0;
      .listContent{
        width: 100%;
        height: 129px;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #EBEBEB;
        .contentImg{
          display: block;
          width: 74px;
          height: 97px;
        }
        .contentText{
          margin-left: 9px;
          width: 168px;
          overflow: hidden;
          .text1{
            font-weight: bold;
            font-size: 15px;
            color: #333333;
            margin-top: 7px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .text2{
            font-weight: bold;
            font-size: 12px;
            color: #333333;
            margin-top: 7px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .text3{
            font-weight: 400;
            font-size: 12px;
            color: #757171;
            margin-top: 5px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .button{
        width:61px;
        height: 28px;
        background-color: #1484FB;
        text-align: center;
        line-height: 28px;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        border-radius: 15px;
      }
      .button2{
        width: 50px;
        height: 23px;
        background-color: #FD564D00;
        text-align: center;
        line-height: 24px;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        border-radius: 10px;
      }
    }
    .area{
      width: 100%;
      height: 33px;
      background-color: #fff;
      box-sizing: border-box;
      padding-left: 15px;
      font-weight: bold;
      font-size: 15px;
      color: #333333;
      border-top: 1px solid #CCCCCC27;
      padding-top: 6px;
    }
    .areaList{
      width: 355px;
      min-height: 73px;
      background-color: #fff;
      margin: 12px auto 0;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 10px 12px;
      overflow: hidden;
      .areaName{
        font-weight: bold;
        font-size: 17px;
        color: #333333;
        margin-top: 7px;
      }
      .areaAddress{
        font-weight: 500;
        font-size: 12px;
        color: #737373;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .addressText{
          width: 260px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .popup{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, .3);
      z-index: 999;
      .van-picker{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }
  }
</style>
